<html>

<head>
      <meta charset="utf-8">
      <title>canvas图片压缩</title>
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
            label {
                  border: 1px solid #eee;
                  padding: 6px 10px;
                  cursor: pointer;
                  color: #666;
                  border-radius: 4px;
            }

            .preview {
                  width: 300px;
                  height: 200px;
                  border: 1px solid #eee;
            }

            img {
                  display: none;
            }
      </style>

</head>

<body>
      <h1></h1>
      <div class="container">
            <form id="fm" role="form">
                  <legend>canvas图片压缩</legend>

                  <div class="form-group">
                        <label for="sImg">选择图片</label>
                        <input type="file" class="form-control" id="sImg" placeholder="Input field" style="display:none">
                  </div>

                  <div class="preview">
                        <img src="" id="imgPreview" height="200" width="300" alt="Image preview..." />
                        <img src="" id="preview" height="200" width="300" alt="Image preview..." />
                  </div>

                  <canvas id="canvas"></canvas>
                  <img id="source" src="" style="display: none;">
                  <input id="sub" type="submit" class="form-control" value="提交">
            </form>
      </div>

      <script>

            window.onload = function () {

                  var oInput = $('sImg');

                  oInput.onchange = function (e) {
                        var preview = document.querySelector('img');
                        previewFile()
                  }

                  var canvas = document.getElementById('canvas');
                  var source = document.getElementById('source');
                  var preview = document.getElementById('preview');

                  source.onload = function () {
                        var width = source.width;
                        var height = source.height;
                        var context = canvas.getContext('2d');

                        // draw image params
                        var sx = 0;
                        var sy = 0;
                        var sWidth = width;
                        var sHeight = height;
                        var dx = 0;
                        var dy = 0;
                        var dWidth = width;
                        var dHeight = height;
                        var quality = 0.7;

                        canvas.width = width;
                        canvas.height = height;

                        context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

                        var dataUrl = canvas.toDataURL('image/jpeg', quality);
                        preview.src = dataUrl;
                  };

                  source.src = 'hancock.jpg';



                  $('sub').onclick=function(){
                        console.log($('sImg').files[0]);
                        return false;
                  }



            };





            function $(str) {
                  return document.getElementById(str);
            }

            function previewFile() {

                  var preview = document.querySelector('img');
                  var file = document.querySelector('input[type=file]').files[0];
                  var reader = new FileReader();

                  reader.readAsDataURL(file);

                  reader.onloadend = function () {

                        preview.src = reader.result;

                        //图片展示
                        preview.style.display = 'block';
                  }

            }
      </script>

</body>

</html>